---
title: "Progress Bar"
description: A sleek and responsive bar that visually tracks task completion, loading states, or step-based processes in real time.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ProgressBar.html#props"]
---

## Basic

Progress bars show how much an operation is done, either exactly or roughly, over time.
<How toUse="statuses/progress-bar/progress-bar-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/progress-bar
```

## Manual installation
```bash
npm i tailwind-merge
```
<SourceCode toShow='progress-bar'/>

## Anatomy
```
import { Description, Label } from "@/components/ui/field"
import {
  ProgressBar,
  ProgressBarHeader,
  ProgressBarTrack,
  ProgressBarValue,
} from "@/components/ui/progress-bar"
```
```
<ProgressBar value={value}>
  <ProgressBarHeader>
    <Label>Loading…</Label>
    <ProgressBarValue />
  </ProgressBarHeader>
  <ProgressBarTrack />
  <Description>This is an example of a progress bar indicating 50% completion.</Description>
</ProgressBar>
```

## Indeterminate
An indeterminate progress bar is a type of progress indicator that does not show a specific amount of progress or percentage complete.
<How toUse="statuses/progress-bar/indeterminate-progress-bar-demo" />
